<template>
  <!-- 表格 -->
  <div class="table">
    <el-table :data="tableData">
      <el-table-column type="selection" width="55" v-if="is_selete">
      </el-table-column>
      <!-- 点击行展开行 -->
      <el-table-column type="expand" v-if="expand" width="55">
        <template #default="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- 循环Table字段 -->
      <el-table-column
        v-for="item in titleData"
        :key="item.prop"
        :label="item.label"
        :fixed="item.type == 'operation' ? 'right' : false"
        :width="item.width"
      >
        <template #default="scope">
          <span v-if="!item.type" style="margin-left: 10px">{{
            scope.row[item.prop]
          }}</span>
          <img
            :src="
              scope.row.avatar
                ? scope.row.avatar
                : 'https://img1.baidu.com/it/u=1126878330,2942641081&fm=26&fmt=auto&gp=0.jpg'
            "
            v-if="item.type === 'image'"
            style="width: 30px; height: 30px; border-radius: 100%"
          />
          <el-rate
            v-model="scope.row[item.prop]"
            v-if="item.type === 'score'"
          ></el-rate>
          <el-switch
            class="switchStyle"
            active-text="显示"
            inactive-text="隐藏"
            v-if="item.type === 'check'"
            @change="onChange"
            v-model="scope.row[item.prop]"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column
        width="150"
        fixed="right"
        align="center"
        label="操作"
        v-if="operation"
      >
        <!-- 表格操作按钮 -->
        <template #default="{ row }">
          <el-dropdown>
            <el-button type="text" icon="el-icon-setting"></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, index) in operation"
                  :key="index"
                  @click="handleClick(item, row)"
                  >{{ item }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    operation: Array,
    is_selete: Boolean,
    handleClick: Function,
    is_check: Boolean,
    expand: String,
    onChange: Function,
    tableData: Array,
    titleData: Array,
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 30%;
}
.table {
  background: cyan;
}
</style>

<style>
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 25px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -1px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
}
</style>